import React, { Component } from 'react'
import render from 'react-dom'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import Header from '../component/header'
import OrderNav from './order-nav'
import "../../resource/css/page/orin.less"
import { List, InputItem, Button, Switch, Checkbox, Radio, Flex } from 'antd-mobile/lib';
import { createForm } from 'rc-form';

const Item = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

class H5NumberInputExample extends React.Component {
	constructor() {
		super();
		this.state = {
		    moneyfocused: false
		  }
	}

	onChange(val) {
		console.log(val);
	}

	onSubmit() {
		this.props.form.validateFields({ force: true }, (error) => {
			if (!error) {
				console.log(this.props.form.getFieldsValue());
			} else {
				alert('Validation failed');
			}
		});
	}
  
	render() {
		let self = this;
		const { getFieldProps } = this.props.form;

		const data = [
			{ value: 0, label: '精品打蜡', price: '180元' },
			{ value: 1, label: '玻璃镀膜', price: '180元' }
		];

	    return (
	    	<div>

	    		<Header back={true} titleName="预约洗车" />

				<OrderNav at="take" />

				<div className="orin-form">	
					<List>
						<InputItem
							{...getFieldProps('name')}
							type="name"
							placeholder="如何称呼您"
						/>
						<InputItem
							{...getFieldProps('phone')}
							type="phone"
							placeholder="手机"
						/>
						<InputItem
							{...getFieldProps('license')}
							type="license"
							placeholder="车牌"
						/>
						<InputItem
							{...getFieldProps('park')}
							type="park"
							placeholder="停车点"
						/>
						<InputItem
							{...getFieldProps('remarks')}
							type="remarks"
							placeholder="备注厂牌和颜色，帮助我们更快找到"
						/>

						<div className="orin-from-take">
							<ul>
								<li className="orin-form-item">
									<span><input type="radio" name="style" onChange={e => console.log('checkbox', e)} /> 外洗</span>
									<span>20元</span>
								</li>
								<li className="orin-form-item">
									<span><input type="radio" name="style" onChange={e => console.log('checkbox', e)} /> 内外洗</span>
									<span>20元</span>
								</li>
							</ul>
							<div className="orin-form-label">其他服务</div>
							{data.map(i => (
								<div key={i.value} className="orin-form-item">
									<span>
										<span className="orin-form-check">
											<Checkbox onChange={() => this.onChange(i.value)} />
										</span>
										{i.label}
									</span>
									<span>{i.price}</span>
								</div>
							))}
						</div>

						<div className="orin-take-foot">
							<div>
								<span className="orin-take-total">总计：<span>65元</span></span>
								<span className="orin-take-count">预计需时：30分钟</span>
							</div>
							<div className="orin-take-pay" onClick={() => self.onSubmit()}>立即支付</div>
						</div>
						
					</List>
				</div>

	    	</div>
	      
	    );
	}
}

const H5NumberInputExampleWrapper = createForm()(H5NumberInputExample);

export default connect()(H5NumberInputExampleWrapper)
